<script setup lang="ts">
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context'
import { useDesignStore, useInstStore } from '@/stores'
import DefaultView from '@/views/default.vue'
import { App, ConfigProvider, Spin } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import { ref } from 'vue'
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')

const locale = ref(zhCN)
const theme = ref<ThemeConfig>({
  token: {
    // sync with `--app-color-primary` variable in var.less
    colorPrimary: '#1964FE',
    // sync with `--app-color-border` variable in var.less
    colorBorder: '#DDDDDD',
    // sync with `--app-control-placeholder-color` variable in var.less
    colorTextPlaceholder: '#999999',
  },
  components: {
    Button: {
      borderRadius: 4,
    },
    Radio: {
      // sync with `--app-text-color-main` variable in var.less
      colorText: '#333333',
    },
  },
})

const designStore = useDesignStore()
const instStore = useInstStore()
instStore.loadInstDetail()
</script>

<template>
  <ConfigProvider :locale="locale" :theme="theme">
    <App>
      <Spin v-bind="designStore.config.spin">
        <DefaultView />
      </Spin>
    </App>
  </ConfigProvider>
</template>

<style scoped>

</style>
